﻿<%@page import="edu.uit.se.laps.web.model.LoaiSanPham"%>
<%@page import="edu.uit.se.laps.web.model.TaiKhoan"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!-- pageEncoding="UTF-8"%> -->
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ page
	import="edu.uit.se.laps.web.*,edu.uit.se.laps.web.controller.*, java.net.*,java.text.*,java.util.*"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>myLife</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script language="javascript" src="1.7.2.jquery.min.js"></script>
	
</head>
<body>
				
	<tiles:insertTemplate template="Template.jsp">
		<tiles:putAttribute name="focusbody">
			
			<%
				ShoppingCart cart = (ShoppingCart) session
						.getAttribute("ShoppingCart");
		
				if (cart == null) {
					cart = new ShoppingCart();
					session.setAttribute("ShoppingCart", cart);
				}
			%>
			
			<div class="bieutuongTT"><img src="sources/icon/title.png"/></div>
			<div class="slideShowTT"> 
				<img src="sources/slide/Fa_1.jpg" class="active"/> 
				<img src="sources/slide/Fa_2.jpg"/> 
				<img src="sources/slide/Fa_3.jpg"/> 
				<img src="sources/slide/Fa_4.jpg"/> 
				<img src="sources/slide/Fa_5.jpg"/>
				<img src="sources/slide/Fa_6.jpg"/> 
				<img src="sources/slide/Fa_7.jpg"/> 
				<img src="sources/slide/Fa_8.jpg"/> 
				</div>
		<div class="imgContent">
	  		
			<div class="connua" style="text-align: center"><img src="sources/icon/arrowDown.png"/></div>
			
			<div class="rowPic">
				<s:set name="myListSize" value="%{#attr['spList'].size}"/>
				<s:set name="start" value="%{#attr['start']}" />
				<s:set name="stop" value="%{#attr['stop']}" />
				<s:set name="curidsp" value="%{#attr['idsp']}" />
				
					<s:iterator begin="#start" end="#stop" value="spList">
							<%-- <s:if test="spList[start] != null"> --%>
							
							<div class="frame" id="<s:property value="idSP" />">
								<a href="detail?idsp=<s:property value="idSP"/>" id="1">
									<img class="thumbIMG" src="<s:property value="srcImg" />"/></a>
								<div class="above"><a class="thongtin">Số Lượng: <s:property value="soLuongTon" /></a></div>
								<div class="under">
									<div class="infor"><s:property value="tenSP" /></div>
									<div class="rate"><s:property value="gia" /></div>
									<a href="detail?idsp=<s:property value="idSP"/>">
										<img src="sources/icon/next.png">
									</a>
								</div>
							</div>
							<%-- </s:if> --%>
					</s:iterator>
			</div>
	  </div>
	  
	  <div class="paging">
	  	<a class="pre"></a>
	  	<a class="tab1" href="">1</a>
	  	<a class="tab2" href="">2</a>
	  	<a class="tab3" href="">3</a>
	  	<a class="tab4" href="">4</a>
	  	<a>...</a>
		<a class="nex"></a>
	  	
	  </div>
	 
		</tiles:putAttribute>
	</tiles:insertTemplate>
	<script>
	
			var soluonghinh = 9;
			$('.pre').text("<<");
			$('.nex').text(">>");
		  	var value_stop = parseInt("<s:property value='%{#myListSize}'/>");
		  	var checkCount = parseInt(value_stop/soluonghinh + 1);
			var value_cur = parseInt("<s:property value='%{#start}'/>");
			
			var stop;/*Kiem tra tab cuoi cung co thoa de hien san pham ko */
			
			var value = parseInt(1);
			if(value <= 0){
				value = 1;
			}
			if(value >= checkCount){
				value = checkCount - 3;
			}
			
			if(checkCount == 1){
				$('.tab1').text(value);
				$('.tab2').remove();
				$('.tab3').remove();
				$('.tab4').remove();
				$('.pre').remove();
				$('.nex').remove();
			}else if(checkCount == 2){
				$('.tab1').text(value);
				$('.tab2').text(value + 1);
				$('.tab3').remove();
				$('.tab4').remove();
				$('.pre').remove();
				$('.nex').remove();
			}else if(checkCount == 3){
				$('.tab1').text(value);
				$('.tab2').text(value + 1);
				$('.tab3').text(value + 2);
				$('.tab4').remove();
				$('.pre').remove();
				$('.nex').remove();
			}else{
				$('.tab1').text(value);
				$('.tab2').text(value + 1);
				$('.tab3').text(value + 2);
				$('.tab4').text(value + 3);
				
			}
			
			$('.pre').click(function(){
				value = value - 1;
				if(value <= 0)
					value = 1;
				$('.tab1').text(value);
				$('.tab2').text(value + 1);
				$('.tab3').text(value + 2);
				$('.tab4').text(value + 3);
			});
		
			$('.nex').click(function(){
				value = value + 1;
				if(value >= checkCount - 3){
					value = checkCount - 3;
					
				}
				$('.tab1').text(value);
				$('.tab2').text(value + 1);
				$('.tab3').text(value + 2);
				$('.tab4').text(value + 3);
			});
			
	  		
	  		
	  		$(function() {
	  			$.fn.getCurId=function(){
	  				$(this).click(function(){
	  					var t = $(this).text();
	  					var s = t-1;
	  					if(t == checkCount){
	  						stop = s*soluonghinh + (value_stop - (s*soluonghinh) - 1);
	  					}else{
	  						stop = s*soluonghinh + soluonghinh - 1;
	  					}
			  			var hre = "fashion?start= " + (s*soluonghinh) + "&stop= " + stop;
			  			$(this).attr('href',hre);
	  				});
	  				
		  		};
	  		});
	  		$(function() {
	  			$(".tab1").getCurId();
	  			$(".tab2").getCurId();
	  			$(".tab3").getCurId();
	  			$(".tab4").getCurId();
	  		});
		/*
		 * Tao Paging de chuyen trang
		 * param: pre, nex
		 * 
		 * */
			$('.frame IMG').css({'cursor':'pointer'});
	  		$('.paging').css({'position':'relative','height':'40px', 'width':'100%',
	  			'margin-bottom':'40px'});
	  		$('.paging a').css({'line-height':'40px','text-align':'center','float':'left','height':'40px', 
	  		'width':'40px', 'background':'green', 'margin-left':'10px','cursor':'pointer', 'color':'white',
	  		'text-decoration':'none'});
	  		
	  		$('.paging a.pre').css({'background':'#B80000'});
	  		$('.paging a.nex').css({'background':'#B80000'});
	  		
	  		$(function() {
	  			$.fn.hoverTab=function(){
		  			$(this).hover(function(){
			  			$(this).css({'background': '#003D00'});
			  		}, function(){
			  			$(this).css({'background': 'green'});
			  		});
		  		};
	  		});
	  		$(function() {
	  			$(".tab1").hoverTab();
	  			$(".tab2").hoverTab();
	  			$(".tab3").hoverTab();
	  			$(".tab4").hoverTab();
	  		});
	  		
	  		/*
	  		 * Chuyen dinh dang Gia tien tu: 99888 --> 99.888
	  		 * Ham: reverse() --> Dao nguoc chuoi
	  		 * Ham: format() --> Dinh dang lai Gia tien cho de nhin
	  		 * */
	  		function reverse (s) {
	  		    var o = '';
	  		    for (var i = s.length - 1; i >= 0; i--)
	  		        o += s[i];
	  		    return o;
	  		}

	  		function format (s) {
	  		    var o = '';
	  		    for (var i = 0; i < s.length ; i++){
	  		    	if(i%3 == 0 && i!=0){
	  		    		o += "." + s[i] ;	
	  		    	}else{
	  		    		o += s[i];
	  		    	}
	  		    	
	  		    }
	  		    return o;
	  		}

	  		var countFra = $('.rowPic .frame').find('.rate').length;
	  		var rateStr = [];
			//In put thong tin gia tien vao rateStr
	  		for(var i = 0; i < countFra; i++){
	  			var temp = parseInt($('.rowPic .frame:eq(' + i + ')').find('.rate').text(), 10);
				var ee = String(temp);
				var re = reverse(ee);
				var fo = format(re);
				rateStr.push(reverse(fo));
	  		}

	  		$('.rate').text("");
			//Out put thong tin gia tien ra
	  		for(var i = 0; i < rateStr.length; i++){
	  			$('.rowPic .frame:eq(' + i + ')').find('.rate').text(rateStr[i]);
	  			$('.rowPic .frame:eq(' + i + ')').find('.rate').append("<sup>đ</sup>");
	  		}
	</script>
</body>
</html>
	